<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>Page Peel-download by http://sc.xueit.com</title>

	<link rel="stylesheet" type="text/css" href="pagepeel.packed.css" />
	    
    <script src="jquery.min.js" type="text/javascript"></script>

	<script type="text/javascript" src="pagepeel-jquery.js"></script>

    <style type="text/css">
        body {
            padding:1em; margin:0;
            background: #ccc;
            color: #333;
        }
        
        .xteam-pagepeel img.peel {
        	width: 75px;
        	height: 79px;
        }
        
        
		.xteam-pagepeel .back {
			width: 75px;
			height: 75px;
		}
        
        .xteam-pagepeel .corner {
        	background-repeat: no-repeat;       	
        	background-image: url(note-revealed.png);
        	background-position: top right;
        }
        
        .xteam-pagepeel .peel-hint {
        	color: #333333;
        	border: none;
        	font-family: monospace;
        	font-size: 2em;
        }
        
        .xteam-pagepeel .peel-content .action {
        	color: #333333;
        }
        
        .xteam-pagepeel .peel-content .close {
        	display: none;
        }
        
        .xteam-pagepeel.full .peel-content .close {
        	display: inherit;
        }
        
    </style>
</head>
<body>

	<div id="pagepeel" class="xteam-pagepeel">
		<span class="peel">
			<map name="peelmap">
				<area shape="poly" coords="0,0,614,0,614,614,0,0" title="Go!" href="#" class="peel-hotzone" />
			</map>
			<img src="page-peel.png" alt="" class="peel" />
			<span class="back corner"></span>
			<span class="back link">
				<img src="trans.gif" alt="" class="map" usemap="#peelmap" />
				<span class="peel-content">
					<span class="action">
						Show me the <strong>money!</strong>
					</span>
					<form>
						<button type="button" class="close">Close</button>
					</form>
				</span>
			</span>
		</span>
	</div>

	<h1>X-Team PagePeel, v1.0</h1>
	<h2>Demo/Instructions</h2>
	<div class="about">
	<p>This component achieves a smooth graphic "peeling" effect on a page corner, without the use of Flash.</p>
	<p>The Peel itself, and the revealed content is simply HTML and Images</p>
	</div>
	<div class="implementation">
		<p>Implementation is very simple.</p>
		<ol>
			<li>
				Include the Script and Stylesheet references
				<div style="text-align:left;color:#000000; background-color:#ffffff; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto;font-size:small; font-family:monospace; "><span style="color:#881280;">&lt;link </span><span style="color:#994500;">rel</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;stylesheet&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">type</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;text/css&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">href</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;pagepeel.packed.css&quot;</span><span style="color:#881280;"> /&gt;</span><br />
<span style="color:#881280;">&lt;script </span><span style="color:#994500;">src</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">type</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;text/javascript&quot;</span><span style="color:#881280;">&gt;&lt;/script&gt;</span><br />
<span style="color:#881280;">&lt;script </span><span style="color:#994500;">type</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;text/javascript&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">src</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;pagepeel-jquery.js&quot;</span><span style="color:#881280;">&gt;&lt;/script&gt;</span><br />
</div>
			</li>
			<li>
				Add the required markup to your page.
				<div style="text-align:left;color:#000000; background-color:#ffffff; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto;font-size:small; font-family:monospace; "><span style="color:#881280;">&lt;div </span><span style="color:#994500;">id</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;pagepeel&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">class</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;xteam-pagepeel&quot;</span><span style="color:#881280;">&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;span </span><span style="color:#994500;">class</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;peel&quot;</span><span style="color:#881280;">&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;map </span><span style="color:#994500;">name</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;peelmap&quot;</span><span style="color:#881280;">&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;area </span><span style="color:#994500;">shape</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;poly&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">coords</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;0,0,614,0,614,614,0,0&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">title</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;Go!&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">href</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;#&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">class</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;peel-hotzone&quot;</span><span style="color:#881280;"> /&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;/map&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;img </span><span style="color:#994500;">src</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;page-peel.png&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">alt</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">class</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;peel&quot;</span><span style="color:#881280;"> /&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;span </span><span style="color:#994500;">class</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;back corner&quot;</span><span style="color:#881280;">&gt;&lt;/span&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;span </span><span style="color:#994500;">class</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;back link&quot;</span><span style="color:#881280;">&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;img </span><span style="color:#994500;">src</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;trans.gif&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">alt</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">class</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;map&quot;</span><span style="color:#881280;"> </span><span style="color:#994500;">usemap</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;#peelmap&quot;</span><span style="color:#881280;"> /&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;span </span><span style="color:#994500;">class</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;peel-content&quot;</span><span style="color:#881280;">&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#236e25;"><em>&lt;!-- Your HTML Content Goes here --&gt;</em></span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;/span&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;/span&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881280;">&lt;/span&gt;</span><br />
<span style="color:#881280;">&lt;/div&gt;</span><br />
</div>
			</li>
			<li>
				Instantiate the PagePeel component.
				<div style="text-align:left;color:#000000; background-color:#ffffff; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto;font-size:small; font-family:monospace; "><span style="color:#881280;">&lt;script </span><span style="color:#994500;">type</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;text/javascript&quot;</span><span style="color:#881280;">&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> peel = <span style="color:#881350;">new</span> Xteam.Ui.<span style="color:#003369;">PagePeel</span>(<span style="color:#760f15;">'#pagepeel'</span>); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color:#881280;">&lt;/script&gt;</span><br />
</div>
			</li>
			<li>Specify options for your PagePeel (optional). <br />The following shows the options set to their default values
				<div style="text-align:left;color:#000000; background-color:#ffffff; border:solid black 1px; padding:0.5em 1em 0.5em 1em; overflow:auto;font-size:small; font-family:monospace; "><span style="color:#881280;">&lt;script </span><span style="color:#994500;">type</span><span style="color:#881280;">=</span><span style="color:#1a1aa6;">&quot;text/javascript&quot;</span><span style="color:#881280;">&gt;</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#881350;">var</span> peel = <span style="color:#881350;">new</span> Xteam.Ui.<span style="color:#003369;">PagePeel</span>(<span style="color:#760f15;">'#pagepeel'</span>, {<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fullOpenOnClick: <span style="color:#881350;">true</span>,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fullOpenIsSticky: <span style="color:#881350;">true</span>,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fullOpenCloseOnBodyClick: <span style="color:#881350;">true</span><br />
&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;<br />
<span style="color:#881280;">&lt;/script&gt;</span><br />
</div>
			</li>			
		</ol>
	</div>
	<script type="text/javascript">
		var peel = new Xteam.Ui.PagePeel('#pagepeel');		
	</script>
</body>
</html>